<template>
  <div class="all-account" v-loading="loading">
    <div class="input-box" style="position: relative;">
        <el-input
            placeholder="搜索趣ID、QQ号、游戏昵称"
            @keyup.enter.native="selectChange"
            style="width:240px;"
            clearable
            v-model.trim="keyWord">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" class="btn" style="margin-left:20px" @click="search">查询</el-button>
        <span class="input-title">审核状态</span>
        <el-select style="margin-left: 10px" v-model="manageType" placeholder="请选择" @change="statusChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- 添加平台 -->
        <span class="input-title">平台</span>
        <el-select v-model="areaType" placeholder="请选择" @change="typeStatusChange">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
    </div>
    <div class="table-box">
      <el-table :data="tableData" ref="table" border style="width: 100%" @sort-change="sortChange">
          <el-table-column prop="accountNo" width="150" label="账号">
            <template slot-scope="scope">
              <!-- <div class="table-btn" @click="goDetail(scope.row)">QQ：{{ scope.row.accountNo }}</div> -->
              <div>QQ：{{ scope.row.accountNo }}</div>
              <div>昵称：{{ scope.row.roleName }}</div>
              <div>{{ scope.row.serverName }}</div>
              <div v-if="scope.row.accountBlackDesc" style="color: red"> {{ scope.row.accountBlackDesc }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="gameName" label="游戏"></el-table-column>

          <el-table-column width="100" prop="userId" label="号主">
            <template slot-scope="scope">
              <div class="table-btn" @click="goUserInfo(scope.row.userId)">
                {{ scope.row.userId }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="roleWorth" label="当前估值" sortable="custom"></el-table-column>
          <el-table-column prop="price" label="售价" sortable="custom"></el-table-column>
          <el-table-column width="160" label="英雄数/皮肤数" prop="accountActiveDay">
            <template slot-scope="scope">
              <div>{{ scope.row.heroNum }}/{{ scope.row.skinNum}}</div>
            </template>
          </el-table-column>
          <el-table-column width="160" label="已选星传说皮肤" prop="applyUserCount">
            <template slot-scope="scope">
              <div>{{ scope.row.skinNames.join('，') }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="selectStatus" label="审核状态">
            <template slot-scope="scope">
                <div :style="{ 'color': scope.row.auditStatus === -1 ? 'red' : '#606266'}">{{ scope.row.auditStatus === 0 ? '未审核' : scope.row.auditStatus === 1 ? '审核通过' : scope.row.auditStatus === -1 ? '审核拒绝' : '-'}}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="150" label="提交时间">
            <template slot-scope="scope">
                <span>{{ _formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column width="100" label="操作">
            <template slot-scope="scope">
              <span class="table-btn" v-if="scope.row.auditStatus === 0" @click="acessRefuse(scope.row, 1)">
                  通过
              </span>
              <span class="table-btn" v-if="scope.row.auditStatus === 0" style="color: red; margin-left: 5px" @click="acessRefuse(scope.row, -1)">
                拒绝
              </span>
              <div v-if="scope.row.auditStatus !== 0">-</div>
            </template>
          </el-table-column>
      </el-table>
    </div>

    <div class="tools">
        <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageNum"
            :page-sizes="_pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <el-dialog
        class="dialog-box"
        title="拒绝理由:"
        :visible.sync="dialogVisible"
        width="500px">
        <div>
            <el-input type="textarea" maxlength="200" rows="3" show-word-limit v-model.trim="remark"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setAuditStatus('', status)">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'

export default {
  data () {
    return {
      date: [], // 时间
      loading: false,
      dialogVisible: false,
      remark: '',
      keyWord: '',
      firstCommitType: 0,
      manageType: 0,
      options: [
        {
          value: 0,
          label: '待审核'
        },
        {
          value: -1,
          label: '审核拒绝'
        },
      ],
      firstCommitOptions: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '首次提交'
        },
        {
          value: 2,
          label: '非首次提交'
        }
      ],
      areaType: null,
      typeOptions: [ //平台选择字段
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '安卓'
        },
        {
          value: 2,
          label: 'IOS'
        }
      ],
      tableData: [],
      srcList: [],
      pageNum: 1,
      pageSize: 10,
      total: 12,
      dataId: '',
      status: '',
      current: 0,
      type: '',
      order: '',
    }
  },
  created() {
    this.getList(1)
  },
  methods: {
    search() {
      this.getList(1)
      if (!this.keyWord) {
        this.$emit('updateCount')
      }
    },
    // 通过审核和拒绝
    acessRefuse(item, status) {
      let msg = '确认通过审核？'
      if (status === -1) {
        msg = '确认拒绝通过审核？'
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: status === -1 ? 'warning' : 'success'
      }).then(async () => {
        let res = await this.$http.get(`/trade/operateApply?auditStatus=${status}&id=${item.auditId}`, {
        })
        if (res.code === '0') {
          this.$message({
              type: 'success',
              message: '操作成功'
          })
          this.getList(1)
        } else {
            this.$message({
                type: 'error',
                message: res.desc
            })
        }
        console.log(res, 'res')
        })
    },
    // 后端排序
    sortChange ({ column, prop, order }) {
        this.sort = order || ''
        // 如果没有 sort prop 置为空
        if (!this.sort) {
            this.type = null
        } else {
            if (this.sort === 'ascending') {
                this.sort = 'asc'
            } else {
                this.sort = 'desc'
            }
            this.type = prop
        }
        this.getList()
    },
    exportData() {
    },
    goUserInfo (id) {
        const { href } = this.$router.resolve({
            path: '/dataReport/userInfo',
            query: {
                id
            }
        })
        window.open(href, '_blank')
    },
    // 复制账号链接
    copyAccountNo (orderNo) {
      const aux = document.createElement('textarea')
      aux.innerHTML = orderNo
      document.body.appendChild(aux)
      aux.select()
      document.execCommand('copy')
      document.body.removeChild(aux)
      this.$message.success('复制成功')
    },
    reset() {
      this.pageNum = 1
      this.manageType = 0
      this.keyWord = ''
      this.firstCommitType = 0
      this.areaType = 0
      this.date = []
      this.getList(1)
    },
    async getList (pageNum, flag) {
      if (this.loading) return
      this.pageNum = pageNum
      this.loading = true
      let params = {
          pageNum: pageNum || this.pageNum,
          pageSize: this.pageSize,
          auditStatus: this.manageType, // 审核状态
          areaType: this.areaType,
          auditAccountType: 2
      }
      params.orderType = this.type
      params.sortType = this.sort
      // 导出数据
      if (flag) {
        params.pageSize = 1000000
      }
      if (this.keyWord) params.keyWord = this.keyWord
      params = Object.assign(params, {})
      let res = await this.$http.get('/trade/accounts', {
          params
      })
      if (res.code === '0') {
        this.tableData = res.data
        this.total = res.count
      } else {
          this.$message({
              type: 'error',
              message: res.desc
          })
      }
      this.loading = false
    },
    selectChange () {
        this.manageType = 0
        this.getList(1)
        if (!this.keyWord) {
          this.$emit('updateCount')
        }
    },
    statusChange (manageType) {
      this.manageType = manageType
      this.getList()
    },
    firstCommitChange (firstCommitType) {
      this.firstCommitType = firstCommitType
      this.getList(1)
    },
    typeStatusChange (areaType) {
      this.areaType = areaType
      this.getList()
    },
    // 通过
    setAuditStatus (scope, status) {
        if (scope) {
          this.dataId = scope.row.dataId
          this.current = scope.$index
          this.status = status
        }
        let data = {
          dataId: this.dataId,
          operateStatus: status
        }
        if (this.remark) {
          data.remark = this.remark
        }
        this.$http.post('/deal/operateDealStatus', data).then(res => {
          if (res.code === '0') {
            this.dialogVisible = false
            this.remark = ''
            this.$set(this.tableData[this.current], 'status', this.status)
          } else {
            this.$message({
                type: 'error',
                message: res.desc
            })
          }
        })
    },
    // 展示拒绝弹框
    openDialog (scope, status) {
        this.dialogVisible = true
        this.dataId = scope.row.dataId
        this.current = scope.$index
        this.status = status
    },
    showImgList (imgList) {
        let imgArr = []
        imgList.forEach(item => {
          imgArr.push(item.url)
        })
        this.srcList = imgArr
    },
    goDetail ({ dataId, auditId, selectStatus, gameId }) {
      // 如果是和平精英 并且状态是 待审核状态
      if (gameId === 1106467070 && selectStatus === 1) {
        const { href } = this.$router.resolve({
            path: '/hpjy/accDetail',
            query: {
                dataId,
                auditId
            }
        })
        window.open(href, '_blank')
        return
      }
      const { href } = this.$router.resolve({
          path: '/hpjy/accDetail',
          query: {
              dataId,
              auditId
          }
      })
      window.open(href, '_blank')
    },
    // 页码切换
    sizeChange (val) {
          this.pageNum = 1
          this.pageSize = val
          this.getList()
    },
    // 页容切换
    pageChange (val) {
        this.pageNum = val
        this.getList(this.pageNum)
    },
    _formatDate (timestamp) {
        return formatDate(timestamp, 'YYYY-MM-DD HH:MM')
    }
  }
}
</script>
<style lang="scss" scoped>
.table-box{
  margin-top: 20px;
  .ganda{
    display: flex;
    .ganda-pic{
      width: 80px;
      margin: 0 5px;
      img{
        width: 100%;
      }
    }
  }
}
.input-box {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    .input-title {
        margin: 0 10px 0 20px;
    }
    .btn {
        margin-top: 10px;
        margin-left: 10px;
    }
}
.table-btn{
  cursor: pointer;
  color: #409eff;
  font-size: 13px;
  font-weight: 500;
  &:hover{
    text-decoration: underline;
  }
}
</style>
